<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <header th:replace="header.html"></header>

</head>

<body class="layui-layout-body">

    <div class="layui-body" style="margin:60px 0 0 10px ">

        <div class="layui-row" style="margin:30px 0 0 10px ">
            <div class="layui-col-xs3">

                <h2>数据库创建</h2>
                <div class="div_2">
                    <form class="layui-form " style="margin:20px 0px 0px 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="databaseName" id="databaseName" placeholder="请输入数据库名" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">集合名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="collectionName" id="collectionName"  placeholder="请输入集合名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formAdd">创建</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <div class="layui-col-xs3">
                <h2>数据库信息</h2>
                <div class="div_2">
                    <div id="ID-tree-demo" style="font-size:20px"></div>
                </div>


            </div>
        </div>

    </div>

</body>

<style>

 .div_2{
    border: 2px solid #F0F0F0; /* 边框：2像素宽，实线，颜色为深灰色 */
    background-color: #F8F8F8; /* 背景色为淡灰色 */
    padding: 20px; /* 内边距为20像素，使内容远离边框 */
    width: 90%;

}




</style>

<script type="text/javascript">
    layui.use(function () {
        var laytpl = layui.laytpl;
        var $ = layui.$;
        var layer = layui.layer;
        var tree = layui.tree;
        var form = layui.form;
        var databases;


        // 树形结构渲染
        $(function () {
            $.ajax({
                type: "POST",
                url: "/api/node/getNodeDatabases",
                // async: false,
                success: function (res) {
                    console.log(res);
                    if (res.code === 0) {
                        databases = res.data
                        // 渲染
                        tree.render({
                            elem: '#ID-tree-demo',
                            data: databases,
                            showCheckbox: true,  // 是否显示复选框
                            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                            id: 'demo-id-1',
                            isJump: true, // 是否允许点击节点时弹出新窗口跳转
                            click: function(obj){
                                var data = obj.data;  //获取当前点击的节点数据
                                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                            }
                        });
                    }
                }
            })
        });



        //监听表单提交
        form.on('submit(formAdd)', function(data){
            var databaseName = $.trim($("#databaseName").val());
            var collectionName = $.trim($("#collectionName").val())
            $.ajax({
                url: '/api/node/createDbAndCollection',
                type: 'POST',
                data:{
                    "databaseName": databaseName,
                    "collectionName": collectionName,
                },
                success:function(data){
                    if(data.data == true){
                        layer.msg("创建成功",function() {time:20000})
                        window.parent.frames.location.href="/index"
                    }
                }
            })
            return false;
        });


        form.on('submit(formDel)', function(data){

            var collectionName = $.trim($("#collectionName1").val())
            $.ajax({
                url: '/api/node/deleteCollection',
                type: 'POST',
                data:{
                    "collectionName": collectionName,
                },
                success:function(data){
                    if(data.data == true){
                        layer.msg("创建成功",function() {time:20000})
                        window.parent.frames.location.href="/index"
                    }
                }
            })
            return false;
        });




    });

</script>

</html>